<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图形制作</title>
		<style type="text/css">
			.currency {
				margin: 10px;
			}

			/* 三角形 */
			.triangle1 {
				width: 0;
				height: 0;

				/* border: 100px solid;
				border-top: none;
				border-color: transparent transparent #ffc125 transparent; */
				/* border-top: none;
				border-bottom: 100px solid #ffc125;
				border-left: 100px solid transparent;
				border-right: 100px solid transparent; */

				border: 100px solid transparent;
				border-top: none;
				border-bottom-color: #ffc125;
			}

			.triangle2 {
				width: 0;
				height: 0;
				border: 100px solid;
				border-bottom: none;
				border-color: #ff7ed9 transparent transparent transparent;
			}

			.triangle3 {
				width: 0;
				height: 0;
				border: 100px solid;
				border-left: none;
				border-color: transparent #3affd5 transparent transparent;
			}

			.triangle4 {
				width: 0;
				height: 0;
				border: 100px solid;
				border-right: none;
				border-color: transparent transparent transparent #72ff1a;
			}

			/* 圆形 */
			.circle {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background-color: #a093ff;
			}

			/* 
				椭圆形
				同圆形做法相同，只是调整一下宽高比
			*/
			.oval {
				width: 200px;
				height: 100px;
				border-radius: 50%;
				background-color: #ff5500;
			}

			/* 
				鸡蛋形 
				宽高比最好在2：3，不然只有重新调 border-radius 百分比
			*/
			.egg {
				width: 100px;
				height: 150px;
				border-radius: 50% 50% 50% 50% / 63% 63% 37% 37%;
				background-color: #ffff7f;
			}
		</style>
	</head>
	<body>
		<div class="currency triangle1"></div>
		<div class="currency triangle2"></div>
		<div class="currency triangle3"></div>
		<div class="currency triangle4"></div>
		<div class="currency circle"></div>
		<div class="currency oval"></div>
		<div class="currency egg"></div>
	</body>
</html>
